<template>
	<div class="saicheng-container">
		<el-card shadow="hover" :body-style="{ padding: '20px' }">
			<div class="tournament-list-container">
				<!-- 左侧赛事列表 -->
				<div class="tournament-list">
					<div v-for="(item, index) in tournamentsList" :key="item.id" class="tournament-item" :class="{ active: selectedIndex === index }" @click="selectTournament(index, item)">
						<el-tooltip :content="item.tournamentName" placement="right" :disabled="item.tournamentName.length < 8">
							<div class="tournament-name">
								<i class="el-icon-trophy tournament-icon"></i>
								{{ item.tournamentName }}
							</div>
						</el-tooltip>
						<div class="tournament-date">{{ item.startTime }}</div>
					</div>
				</div>

				<!-- 右侧内容区 -->
				<div class="tournament-content">
					<!-- 添加操作按钮 -->
					<div class="operation-bar" v-if="selectedTournament">
						<el-button type="primary" @click="handleAdd">新增榜单</el-button>
					</div>

					<!-- 表格 -->
					<el-table v-if="selectedTournament" :data="leaderboardList" style="width: 100%" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
						<el-table-column label="排名" width="80" align="center">
							<template #default="scope">
								<span :class="{ 'top-three': scope.$index < 3 }">{{ scope.$index + 1 }}</span>
							</template>
						</el-table-column>

						<el-table-column label="队伍" min-width="200">
							<template #default="scope">
								<div class="team-info">
									<el-image v-if="scope.row.img" :src="baseUrl + scope.row.img" class="team-logo" fit="cover">
										<template #error>
											<div class="image-placeholder">
												<i class="el-icon-picture-outline"></i>
											</div>
										</template>
									</el-image>
									<span>{{ scope.row.teamName }}</span>
								</div>
							</template>
						</el-table-column>

						<el-table-column prop="points" label="积分" width="100" align="center" />
						<el-table-column prop="goalsScored" label="进球" width="100" align="center" />
						<el-table-column prop="goalsConceded" label="失球" width="100" align="center" />

						<!-- 添加操作列 -->
						<el-table-column label="操作" width="180" align="center">
							<template #default="scope">
								<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
								<el-button type="text" class="delete-btn" @click="handleDelete(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<div v-else class="empty-state">
						<i class="el-icon-data-analysis"></i>
						<p>请选择一个赛事查看榜单</p>
					</div>
				</div>
			</div>
		</el-card>

		<!-- 添加/编辑对话框 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" append-to-body>
			<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="队伍名称" prop="teamName">
					<el-select v-model="form.teamName" placeholder="请选择队伍" style="width: 100%" @change="handleTeamChange">
						<el-option v-for="team in teamsList" :key="team.id" :label="team.teamName" :value="team">
							<div class="team-select-item">
								<el-image v-if="team.img" :src="baseUrl + team.img" class="team-select-logo" fit="cover">
									<template #error>
										<div class="image-placeholder">
											<i class="el-icon-picture-outline"></i>
										</div>
									</template>
								</el-image>
								<span>{{ team.teamName }}</span>
							</div>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="积分" prop="points">
					<el-input-number v-model="form.points" :min="0" />
				</el-form-item>
				<el-form-item label="进球" prop="goalsScored">
					<el-input-number v-model="form.goalsScored" :min="0" />
				</el-form-item>
				<el-form-item label="失球" prop="goalsConceded">
					<el-input-number v-model="form.goalsConceded" :min="0" />
				</el-form-item>
				<!-- <el-form-item label="队徽">
					<el-upload class="avatar-uploader" :action="uploadUrl" :headers="headers" :show-file-list="false" :on-success="handleUploadSuccess" :before-upload="beforeUpload">
						<img v-if="form.img" :src="baseUrl + form.img" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item> -->
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { getTournamentsList } from "@/api/lv/saishi";
import { getTournamentLeaderboardList, createTournamentLeaderboard, deleteTournamentLeaderboard, getTournamentTeamsList } from "@/api/lv/bd";

export default {
	data() {
		return {
			tournamentsList: [],
			selectedIndex: -1,
			selectedTournament: null,
			baseUrl: process.env.VUE_APP_BASE_API,
			leaderboardList: [],
			dialogVisible: false,
			dialogTitle: "",
			form: {
				id: undefined,
				tournamentId: undefined,
				teamName: "",
				points: 0,
				goalsScored: 0,
				goalsConceded: 0,
				img: ""
			},
			rules: {
				teamName: [{ required: true, message: "请输入队伍名称", trigger: "blur" }],
				points: [{ required: true, message: "请输入积分", trigger: "blur" }]
			},

			teamsList: []
		};
	},
	mounted() {
		this.getTournamentsList();
	},
	methods: {
		getTournamentsList() {
			getTournamentsList({
				pageNum: 1,
				pageSize: 1000
			}).then((res) => {
				this.tournamentsList = res.data.records;
			});
		},
		selectTournament(index, tournament) {
			this.selectedIndex = index;
			this.selectedTournament = tournament;
			this.getTournamentLeaderboardList();
			this.getTournamentTeamsList();
		},
		getTournamentTeamsList() {
			getTournamentTeamsList({
				tournamentId: this.selectedTournament.id,
				pageNum: 1,
				pageSize: 1000
			}).then((res) => {
				this.teamsList = res.data.records;
				console.log(this.teamsList);
			});
		},
		getTournamentLeaderboardList() {
			getTournamentLeaderboardList({
				tournamentId: this.selectedTournament.id,
				pageNum: 1,
				pageSize: 1000
			}).then((res) => {
				this.leaderboardList = res.data.records;
			});
		},
		handleTeamChange(team) {
			this.form.teamName = team.teamName;
			this.form.img = team.img;
		},
		// 打开新增对话框
		handleAdd() {
			console.log(this.selectedTournament);
			this.dialogTitle = "新增榜单";
			this.form = {
				tournamentId: this.selectedTournament.id,
				teamName: "",
				points: 0,
				goalsScored: 0,
				goalsConceded: 0,
				img: ""
			};
			this.dialogVisible = true;
		},

		// 打开编辑对话框
		handleEdit(row) {
			this.dialogTitle = "编辑榜单";
			this.form = { ...row };
			// 找到对应的team对象
			const team = this.teamsList.find((t) => t.teamName === row.teamName);
			if (team) {
				this.form.teamName = team;
			}
			this.dialogVisible = true;
		},

		// 处理删除
		handleDelete(row) {
			this.$confirm("确认删除该榜单数据吗？", "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				deleteTournamentLeaderboard(row.id).then(() => {
					this.$message.success("删除成功");
					this.getTournamentLeaderboardList();
				});
			});
		},

		// 提交表单
		submitForm() {
			this.$refs.formRef.validate((valid) => {
				if (valid) {
					createTournamentLeaderboard(this.form).then(() => {
						this.$message.success(this.form.id ? "修改成功" : "新增成功");
						this.dialogVisible = false;
						this.getTournamentLeaderboardList();
					});
				}
			});
		},

		// 上传成功回调
		handleUploadSuccess(res) {
			this.form.img = res.data;
		},

		// 上传前校验
		beforeUpload(file) {
			const isImage = file.type.startsWith("image/");
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isImage) {
				this.$message.error("上传文件只能是图片格式!");
				return false;
			}
			if (!isLt2M) {
				this.$message.error("上传图片大小不能超过 2MB!");
				return false;
			}
			return true;
		}
	}
};
</script>

<style lang="scss" scoped>
.saicheng-container {
	padding: 20px;
	background-color: #f5f7fa;
	min-height: calc(100vh - 120px);
}

.tournament-list-container {
	display: flex;
	gap: 30px;
	min-height: 80vh;
	background-color: #fff;
	min-width: 1200px;
}

.tournament-list {
	width: 240px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 15px;
	border-right: 1px solid #ebeef5;
	overflow-y: auto;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-thumb {
		background: #dcdfe6;
		border-radius: 3px;
	}
}

.tournament-item {
	padding: 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s;
	border: 1px solid #ebeef5;

	&:hover {
		background-color: #f5f7fa;
		transform: translateX(2px);
	}

	&.active {
		background-color: #ecf5ff;
		border-color: #409eff;
		color: #409eff;
	}
}
.team-logo {
	width: 40px;
	height: 40px;
}
.tournament-name {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tournament-icon {
	font-size: 16px;
	color: #ffd04b;
}

.tournament-date {
	font-size: 12px;
	color: #909399;
}

.tournament-content {
	flex: 1;
	padding: 20px;
	overflow-x: auto;

	&::-webkit-scrollbar {
		height: 8px;
		width: 8px;
	}

	&::-webkit-scrollbar-thumb {
		background: #dcdfe6;
		border-radius: 4px;

		&:hover {
			background: #c0c4cc;
		}
	}

	&::-webkit-scrollbar-track {
		background: #f5f7fa;
	}
}

.tournament-detail {
	h2 {
		margin-top: 0;
		margin-bottom: 20px;
		color: #303133;
		font-size: 20px;
	}
}

.tournament-header {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	.header-left {
		h2 {
			margin: 0 0 12px 0;
			color: #303133;
			font-size: 24px;
		}
	}
}

.tournament-info {
	display: flex;
	gap: 20px;
	color: #606266;

	.info-item {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 14px;

		i {
			color: #409eff;
		}
	}
}

.team-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.team-logo {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}

.image-placeholder {
	width: 30px;
	height: 30px;
	background: #f5f7fa;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #909399;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 300px;
	color: #909399;

	i {
		font-size: 48px;
		margin-bottom: 16px;
	}

	p {
		margin: 0;
		font-size: 14px;
	}
}

.top-three {
	color: #409eff;
	font-weight: bold;
}

.operation-bar {
	margin-bottom: 20px;
}

.delete-btn {
	color: #f56c6c;
}

.avatar-uploader {
	:deep(.el-upload) {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		&:hover {
			border-color: #409eff;
		}
	}
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100px;
	height: 100px;
	display: block;
}

.team-select-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.team-select-logo {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
</style>
